<template>
    <div class="app-container">
      <div class="custom_card_0">
        <el-form  inline="true" >
          <el-form-item label="品牌/车系/车型" prop="modelName">
            <el-input
              v-model="modelName"
              placeholder="请输入品牌/车系/车型"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="车型信息" prop="modelInfo"></el-table-column>
            <el-table-column label="座位" prop="seating"></el-table-column>
            <el-table-column label="运营分类" prop="operatingClassification"></el-table-column>
            <el-table-column label="月租金" prop="monthlyRent"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="text" @click="checked(row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getData"
      />
    </div>
</template>

<script>
import * as api from '@/api/longOrder/index'

export default {
    props: ['storeId', 'startTime', 'endTime'],
    data() {
        return {
            list: [],

            loading: false,
            nowChecked: null, // 当前选择
            showtaocan: false, // 显示选择套餐
            modelMealList: [], // 套餐列表
            total: 0,
            modelName:null,
            queryForm: {
                classification: '', // 	运营分类 0.全部 1. 经济型; 2. 舒适型; 3. 商务型; 4. 豪华型 5.SUV
                speedChangingBox: '', // 变速箱 1. 手动; 2. 自动
                pageNum: 0,//页码   必选
                pageSize: 10, //每页显示数据 必选
                modelName:null
            },
        };
    },
    computed: {
        formData() {
            const formData = {
                storeId: this.storeId,
                classification: this.queryForm.classification,
                speedChangingBox: this.queryForm.speedChangingBox,
                pageNum: this.queryForm.pageNum, //页码   必选
                pageSize: this.queryForm.pageSize, //每页显示数据 必选
                modelName: this.modelName, //每页显示数据 必选
            };
            return formData;
        },
    },
    mounted() {
        this.getData();
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.formData.modelName=this.modelName
        this.formData.pageNum = 1
        this.getData()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formData.modelName=null;
        this.modelName=null;
        this.handleQuery()
      },
        getData() {
            this.loading = true;
            api.classificationMoldelList(this.formData).then(res => {
                this.list = res.rows || [];
                this.loading = false;
                this.total = res.total
            })
        },
        /** 选择车型 */
        checked(row) {
            this.$emit('checked', row);
        },
    },
}
</script>
